import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import { Avatar, Breadcrumb, Menu, Dropdown, Icon, Button, Tag } from 'antd';
import store from '../../../redux/index';
import './index.less';

const menuClick = (key) => {
  if (key.key == 3) {
    sessionStorage.removeItem('token');
    store.dispatch({ type: 'loginOut' });
  } else if (key.key == 2) {
    store.dispatch({ type: 'ADD_TAGS', text: '/user/ModifyPwd', title: '密码修改' });
  }
};
const menu = (
  <Menu onClick={menuClick}>
    <Menu.Item key="2"><a href="#/user/ModifyPwd">密码修改</a></Menu.Item>
    <Menu.Item key="3">退出登录</Menu.Item>
  </Menu>
);
class Head extends React.Component {
    toggleCollapsed=() => {
      store.dispatch({ type: 'toggle' });
    }
    closeTag = (item) => {
      store.dispatch({ type: 'REMOVE_TAGS', text: item });
    }
    render() {
      return (
        <div className="clearfix">
          {/*  展开左侧菜单
                <Icon
                    type={store.getState()["toggleCollapsed"].collapsed ? 'menu-unfold' : 'menu-fold'}
                    onClick={this.toggleCollapsed}
                    style={{ marginBottom: 16 }}
                    className="toggleMenus"
                /> */}
          <Breadcrumb>
            <Breadcrumb.Item>首页</Breadcrumb.Item>
            <Breadcrumb.Item>用户管理</Breadcrumb.Item>
          </Breadcrumb>
          {
            store.getState()['addTags'].tagsMap.map((item, key) => {
              return <Tag key={item} closable onClose={() => this.closeTag(item)}>
                <Link to={item}>{store.getState()['addTags'].tagsTitle[key]}</Link>
              </Tag>;
            })
          }
          {
            sessionStorage.getItem('username') != null ?
              <Dropdown overlay={menu} trigger={['click']}>
                <a className="ant-dropdown-link">
                  <span className="userAvatar"></span>
                  <span className="user">{sessionStorage.getItem('username')}</span>
                  <Icon type="down" />
                </a>
              </Dropdown> : <Dropdown overlay={menu} trigger={['click']}>
                <a className="ant-dropdown-link">
                  <Avatar icon="user" />
                  <Icon type="down" />
                </a>
              </Dropdown>
          }

        </div>
      );
    }
}

export default Head;
